<!-- 虚拟人创建与定制 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>虚拟人创建与定制</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="virtual-creator">  
    <el-container>  
      <el-main>  
        <el-row :gutter="20">  
          <el-col :span="12">  
            <div class="creator-panel">  
              <h2>形象设计</h2>  
              <el-form ref="designForm" :model="designModel" label-width="120px">  
                <el-form-item label="面部特征">  
                  <el-input v-model="designModel.faceFeatures"></el-input>  
                </el-form-item>  
                <el-form-item label="虚拟人的年龄">  
                  <el-input v-model="designModel.age"></el-input>  
                </el-form-item>  
                <el-form-item label="发型">  
                  <el-select v-model="designModel.hairStyle" placeholder="请选择发型">  
                    <el-option  
                      v-for="item in hairStyles"  
                      :key="item.value"  
                      :label="item.label"  
                      :value="item.value">  
                    </el-option>  
                  </el-select>  
                </el-form-item>  
                <el-form-item label="服装">  
                  <el-select v-model="designModel.clothing" placeholder="请选择服装">  
                    <el-option  
                      v-for="item in clothingStyles"  
                      :key="item.value"  
                      :label="item.label"  
                      :value="item.value">  
                    </el-option>  
                  </el-select>    
                </el-form-item>  
                <el-form-item>  
                  <el-button type="primary" @click="createVirtualPerson">创建虚拟人</el-button>  
                </el-form-item>  
              </el-form>  
            </div>  
          </el-col>  
          <el-col :span="12">  
            <div class="preview-panel">  
              <h2>预览与定制</h2>  
              <div class="preview-area">  
                <!--展示虚拟人的3D预览图 -->  
                <img :src="previewImage" alt="虚拟人预览" />  
              </div>  
              <el-button type="text" @click="editVirtualPerson">编辑虚拟人</el-button>  
            </div>  
          </el-col>  
        </el-row>  
      </el-main>  
    </el-container>
    </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      designModel: {  
        name: '', // 虚拟人的名字  
      gender: 'male', // 虚拟人的性别，可以是 'male' 或 'female'  
      age: 25, // 虚拟人的年龄  
      hairColor: 'black', // 虚拟人的头发颜色  
      eyeColor: 'brown', // 虚拟人的眼睛颜色  
      skinTone: 'light', // 虚拟人的肤色  
      facialFeatures: { // 虚拟人的面部特征  
        noseType: 'normal', // 鼻子类型  
        mouthShape: 'smile', // 嘴巴形状  
        eyeShape: 'round', // 眼睛形状  
      },  
      clothing: { // 虚拟人的服装  
        shirtColor: 'blue', // 衬衫颜色  
        pantsColor: 'black', // 裤子颜色  
        shoeType: 'sneakers', // 鞋子类型   
      },
      },
      hairStyles: [  
        { value: 'short', label: '短发' },  
        { value: 'long', label: '长发' }, 
        { value: 'juan', label: '卷发' },   
      ], 
      clothingStyles: [  
        { value: 'T', label: '白T' },  
        { value: 'shirt', label: '衬衫' }, 
        { value: 'shoe', label: '裙子' },   
      ],   
      // https://inews.gtimg.com/newsapp_bt/0/15252288421/1000
      previewImage: 'https://img2.baidu.com/it/u=1510805675,2542674489&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=352',  
      
    }
  },
  created() {
    this.getdata(this.virtualInline)
  },
  methods: {
    async editVirtualPerson() {  
    try {  
      // 获取要编辑的虚拟人的ID  
      const virtualPersonId = this.virtualPersonToEdit.id;  
  
      // 验证表单数据  
      if (!this.validateEditForm()) {  
        this.$message.error('请填写完整的编辑信息！');  
        return;  
      }  
  
      // 准备要发送到后端的虚拟人数据  
      const updatedVirtualPersonData = {  
        ...this.editFormModel,  
      };  
  
      // 更新虚拟人  
      const response = await this.$axios.put(`/api/virtual-persons/${virtualPersonId}`, updatedVirtualPersonData);  
  
      // 处理响应  
      if (response.data.success) {  
        this.$message.success('虚拟人信息更新成功！');  
        const updatedVirtualPerson = response.data.data;  
  
        // 更新本地虚拟人数据  
        this.virtualPersonToEdit = updatedVirtualPerson;  
  
        // 清除表单数据  
        this.resetEditForm();  
      } else {  
        this.$message.error('虚拟人信息更新失败：' + response.data.message);  
      }  
    } catch (error) {  
      console.error('编辑虚拟人时发生错误：', error);  
      this.$message.error('网络错误，请稍后再试！');  
    }  
  },  
  
  validateEditForm() {  
    // 在这里实现表单验证逻辑  
    const virtualPersonId = this.virtualPersonToEdit.id;
    if (virtualPersonId&&this.designModel.age) {
      return true; 
    }
     
  },  
  
  resetEditForm() {  
    // 重置编辑表单数据到初始状态  
    this.$refs.editForm.resetFields();   
  },  
  }
}
</script>

<style scoped>
.virtual-search {
  margin-top: 20px;
}
</style>

 
 